<template>
    <div>
        <div id="container">
            <div class="top">
                <div class="top_left">
                <span class="textA">采集数据</span>/<span class="textB">数据管理</span>
                </div>
            </div>
            <div class="content">
                <div class="formBox">
                    <div class="left_wrap">
                        <el-form v-model="formData" :inline="true">
                            <el-form-item label="设备编号">
                                <el-input v-model="formData.deviceId" placeholder="请输入" clearable />
                            </el-form-item>
                            <el-form-item label="设备名称">
                                <el-input v-model="formData.deviceName" placeholder="请输入" clearable />
                            </el-form-item>
                            <el-form-item label="设备类型">
                                <el-input v-model="formData.deviceType" placeholder="请输入" clearable />
                            </el-form-item>
                            <el-form-item label="记录时间">
                                <el-config-provider :locale="zhCn">
                                    <el-date-picker
                                    type="datetime"
                                    v-model="formData.startTime"
                                    placeholder="开始时间"/>
                                </el-config-provider>
                                 <span>至</span>
                                <el-config-provider :locale="zhCn">
                                    <el-date-picker
                                    type="datetime"
                                    v-model="formData.endTime"
                                    start-placeholder="结束时间"/>
                                </el-config-provider>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="search">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="right_wrap">
                        <el-button type="danger" plain @click="getDelete">批量删除</el-button>
                    </div>
                </div>
                <div class="tableBox">
                    <el-table :data="tableData" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" />
                        <el-table-column label="序号" align="center">
                            <template  #default="scope">
                                {{ calculateSerialNumber(scope.$index, scope.row) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="设备名称" align="center">
                            <template #default="scope">{{ scope.row.deviceName }}</template>
                        </el-table-column>
                        <el-table-column label="设备类型" align="center">
                            <template #default="scope">{{ scope.row.deviceType }}</template>
                        </el-table-column>
                        <el-table-column label="位置" align="center">
                            <template #default="scope">{{ scope.row.network }}</template>
                        </el-table-column>
                        <el-table-column label="电压" align="center">
                            <template #default="scope">{{ scope.row.avoltage }}</template>
                        </el-table-column>
                        <el-table-column label="电流" align="center">
                            <template #default="scope">{{ scope.row.acurrent }}</template>
                        </el-table-column>
                        <el-table-column label="功率" align="center">
                            <template #default="scope">{{ scope.row.apower }}</template>
                        </el-table-column>
                        <el-table-column label="时间" align="center">
                            <template #default="scope">{{ scope.row.uploadTime }}</template>
                        </el-table-column>
                    </el-table>
                    <div class="bottom">
                        <div class="bottom_left">
                            <span>共{{ tableData.length }}条记录</span>
                            <span>{{ formData.currentPage }}/{{ totalPages }} 页</span>
                        </div>
                        <div class="bottom_right">
                            <el-pagination
                                v-model:current-page="formData.currentPage"
                                v-model:page-size="formData.pageSize"
                                :page-sizes="[10, 20, 30, 40]"
                                layout="sizes, prev, pager, next,jumper"
                                :total="tableData.length"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"/>
                        </div>
                    </div>
                    
                </div>
                <el-dialog style="width: 30%;" v-model="dialogTip" :close-on-click-modal="false"
                :close-on-press-escape="false">
                    <div class="tipBox">
                        <div class="img">
                            <img src="../assets/tip.png" alt="">
                        </div>
                        <h3>提示</h3>
                        <p>您是否要删除所选数据?</p>
                    </div>
                    <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogTip = false">我再想想</el-button>
                        <el-button type="primary" @click="chooseDelete">确认删除</el-button>
                    </div>
                    </template>
                </el-dialog>
            </div>
        </div>
    </div>
</template>
<script>
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { ElConfigProvider } from 'element-plus'
import {getcollectData,getcollectInfor} from "@/api/index"
export default ({
    components:{
        [ElConfigProvider.name]: ElConfigProvider
    },
    data() {
        return{
            zhCn,
            formData:{
                deviceId:"",
                deviceName:"",
                deviceType:"",
                startTime:"",
                endTime:"",
                pageSize:10,
                currentPage:1
            },
            tableData:[],
            total:0,
            totalPages:0,
            selectedRows: [], // 用于存储选中的行数据
            dialogTip:false
        }
    },
    mounted(){
        this.getData();
    },
    methods:{
        getData(){
            getcollectData(this.formData).then(resp => { 
                this.tableData = resp.data.records;
                this.total = resp.data.total;
                this.totalPages =resp.data.pages;
            }).catch(() => {
                // this.loading = false;
            });
        },
        search(){
            getcollectData(this.formData).then(resp => { 
                this.tableData = resp.data.records;
                this.total = resp.data.total;
                this.totalPages =resp.data.pages;
            }).catch(() => {
                // this.loading = false;
            });
        },
        getDelete(){
            this.dialogTip =true;
        },
        chooseDelete(){},
        handleSizeChange(val){
            this.formData.pageSize = val;
        },
        handleCurrentChange(val){
            this.formData.currentPage = val;
        },
        handleSelectionChange(selections) {
            this.selectedRows = selections;
        },
        calculateSerialNumber(index, row){
            const startIndex = (this.formData.currentPage - 1) * this.formData.pageSize + 1;
            return startIndex + index;
        },
    }
})
</script>

<style lang="scss" scoped>
#container{
    width: 100%;
    margin: 0;
    padding: 0;
    // height: 1080px;
    .top{
      height: 63px;
      display: flex;
      font-size: 14px;
      justify-content: space-between;
      .top_left{
        width: 300px;
        height: 63px;
        line-height: 63px;
        .textA{
          font-weight: 400;
          color: #7E7E7E;
          margin-right: 5px;
        }
        .textB{
          font-weight: 400;
          color: #3579F6;
          margin-left: 5px;
        }
      }
    }
    .content{
        width: 100%;
        .formBox{
            height: 96px;
            display: flex;
            justify-content: space-between;
            .left_wrap{
                width: 90%;
                .el-input{
                    width: 200px;
                }
                span{
                    margin: 0 10px 0 10px;
                }
            }
            .right_wrap{
                width: 10%;
                display: flex;
            }
        }
        .tableBox{
            // height: 800px;
            .el-table{
                height: 500px;
            }
            .bottom{
                height: 60px;
                display: flex;
                justify-content: space-between;
                .bottom_left{
                    width: 20%;
                    line-height: 60px;
                    font-weight: 400;
                    font-size: 14px;
                    color: rgba(61,61,61,0.44);
                    span{
                        margin-right: 10px;
                    }
                }
                .bottom_right{
                    .el-pagination{
                        margin: 20px 10px 0 0;
                    }
                }
            }
        }
        .tipBox{
            text-align: center;
            .img{
                margin-top: 34px;
            }
        }
        .dialog-footer{
            text-align: center;
        }
    }
}
</style>